<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Aquincum - premium admin template by Eugene Kopyov</title>

<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="css/ie.css" rel="stylesheet" type="text/css"> <![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" src="js/plugins/forms/ui.spinner.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.mousewheel.js"></script>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript" src="js/plugins/charts/excanvas.min.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.sparkline.min.js"></script>

<script type="text/javascript" src="js/plugins/tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/plugins/tables/jquery.sortable.js"></script>
<script type="text/javascript" src="js/plugins/tables/jquery.resizable.js"></script>

<script type="text/javascript" src="js/plugins/forms/autogrowtextarea.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.uniform.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.inputlimiter.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.maskedinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.autotab.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.chosen.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.dualListBox.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.cleditor.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.ibutton.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine.js"></script>

<script type="text/javascript" src="js/plugins/uploader/plupload.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html4.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html5.js"></script>
<script type="text/javascript" src="js/plugins/uploader/jquery.plupload.queue.js"></script>

<script type="text/javascript" src="js/plugins/wizards/jquery.form.wizard.js"></script>
<script type="text/javascript" src="js/plugins/wizards/jquery.validate.js"></script>
<script type="text/javascript" src="js/plugins/wizards/jquery.form.js"></script>

<script type="text/javascript" src="js/plugins/ui/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.breadcrumbs.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.progress.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.colorpicker.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fileTree.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.sourcerer.js"></script>

<script type="text/javascript" src="js/plugins/others/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="js/plugins/others/jquery.elfinder.js"></script>

<script type="text/javascript" src="js/plugins/ui/jquery.easytabs.min.js"></script>
<script type="text/javascript" src="js/files/bootstrap.js"></script>
<script type="text/javascript" src="js/files/functions.js"></script>

<script type="text/javascript" src="js/charts/hBar_side.js"></script>

<!-- Shared on MafiaShare.net  --><!-- Shared on MafiaShare.net  --></head>

<body>
<div class="top2">
<div class="top3">
<!-- Top line begins -->
<div id="top">
    <div class="wrapper">
        <a href="index.html" title="" class="logo"><img src="images/logo.png" alt="" /></a>
        
        <!-- Right top nav -->
        <div class="topNav">
            <ul class="userNav">
                <li><a title="" class="search"></a></li>
                <li><a href="#" title="" class="screen"></a></li>
                <li><a href="#" title="" class="settings"></a></li>
                <li><a href="#" title="" class="logout"></a></li>
                <li class="showTabletP"><a href="#" title="" class="sidebar"></a></li>
            </ul>
            <a title="" class="iButton"></a>
            <a title="" class="iTop"></a>
            <div class="topSearch">
                <div class="topDropArrow"></div>
                <form action="">
                    <input type="text" placeholder="search..." name="topSearch" />
                    <input type="submit" value="" />
                </form>
            </div>
        </div>
        
        <!-- Responsive nav -->
        <ul class="altMenu">
            <li><a href="index.html" title="">Dashboard</a></li>
            <li><a href="ui.html" title="" class="exp" id="current">UI elements</a>
                <ul>
                    <li><a href="ui.html" class="active">General elements</a></li>
                    <li><a href="ui_icons.html">Icons</a></li>
                    <li><a href="ui_buttons.html">Button sets</a></li>
                    <li><a href="ui_grid.html">Grid</a></li>
                    <li><a href="ui_custom.html">Custom elements</a></li>
                    <li><a href="ui_experimental.html">Experimental</a></li>
                </ul>
            </li>
            <li><a href="forms.html" title="" class="exp">Forms stuff</a>
                <ul>
                    <li><a href="forms.html">Inputs &amp; elements</a></li>
                    <li><a href="form_validation.html">Validation</a></li>
                    <li><a href="form_editor.html">File uploads &amp; editor</a></li>
                    <li><a href="form_wizards.html">Form wizards</a></li>
                </ul>
            </li>
            <li><a href="messages.html" title="">Messages</a></li>
            <li><a href="statistics.html" title="">Statistics</a></li>
            <li><a href="tables.html" title="" class="exp">Tables</a>
                <ul>
                    <li><a href="tables.html">Standard tables</a></li>
                    <li><a href="tables_dynamic.html">Dynamic tables</a></li>
                    <li><a href="tables_control.html">Tables with control</a></li>
                    <li><a href="tables_sortable.html">Sortable &amp; resizable</a></li>
                </ul>
            </li>
            <li><a href="other_calendar.html" title="" class="exp">Other pages</a>
                <ul>
                    <li><a href="other_calendar.html">Calendar</a></li>
                    <li><a href="other_gallery.html">Images gallery</a></li>
                    <li><a href="other_file_manager.html">File manager</a></li>
                    <li><a href="other_404.html">Sample error page</a></li>
                    <li><a href="other_typography.html">Typography</a></li>
                </ul>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
</div>
<!-- Top line ends -->


<!-- Sidebar begins -->
<div id="sidebar-info">
    <div class="mainNav-Info">
        <div class="user">
            <a title="" class="leftUserDrop"><img src="images/user.png" alt="" /><span><strong>3</strong></span></a><span>Eugene</span>
            <ul class="leftUser">
                <li><a href="#" title="" class="sProfile">My profile</a></li>
                <li><a href="#" title="" class="sMessages">Messages</a></li>
                <li><a href="#" title="" class="sSettings">Settings</a></li>
                <li><a href="#" title="" class="sLogout">Logout</a></li>
            </ul>
        </div>
        
        <!-- Responsive nav -->
        <div class="altNav">
            <div class="userSearch">
                <form action="">
                    <input type="text" placeholder="search..." name="userSearch" />
                    <input type="submit" value="" />
                </form>
            </div>
            
            <!-- User nav -->
            <ul class="userNav">
                <li><a href="#" title="" class="profile"></a></li>
                <li><a href="#" title="" class="messages"></a></li>
                <li><a href="#" title="" class="settings"></a></li>
                <li><a href="#" title="" class="logout"></a></li>
            </ul>
        </div>
        
        <!-- Main nav -->
        <ul class="nav">
            <li><a href="index.html" title=""><img src="images/icons/mainnav/dashboard.png" alt="" /><span>Dashboard</span></a></li>
            <li><a href="ui.html" title="" class="active"><img src="images/icons/mainnav/ui.png" alt="" /><span>UI elements</span></a>
                <ul>
                    <li><a href="ui.html" title=""><span class="icol-fullscreen"></span>General elements</a></li>
                    <li><a href="ui_icons.html" title=""><span class="icol-images2"></span>Icons</a></li>
                    <li><a href="ui_buttons.html" title=""><span class="icol-coverflow"></span>Button sets</a></li>
                    <li><a href="ui_grid.html" title=""><span class="icol-view"></span>Grid</a></li>
                    <li><a href="ui_custom.html" title=""><span class="icol-cog2"></span>Custom elements</a></li>
                    <li><a href="ui_experimental.html" title=""><span class="icol-beta"></span>Experimental</a></li>
                </ul>
            </li>
            <li><a href="forms.html" title=""><img src="images/icons/mainnav/forms.png" alt="" /><span>Forms stuff</span></a>
                <ul>
                    <li><a href="forms.html" title=""><span class="icol-list"></span>Inputs &amp; elements</a></li>
                    <li><a href="form_validation.html" title=""><span class="icol-alert"></span>Validation</a></li>
                    <li><a href="form_editor.html" title=""><span class="icol-pencil"></span>File uploader &amp; WYSIWYG</a></li>
                    <li><a href="form_wizards.html" title=""><span class="icol-signpost"></span>Form wizards</a></li>
                </ul>
            </li>
            <li><a href="messages.html" title=""><img src="images/icons/mainnav/messages.png" alt="" /><span>Messages</span></a></li>
            <li><a href="statistics.html" title=""><img src="images/icons/mainnav/statistics.png" alt="" /><span>Statistics</span></a></li>
            <li><a href="tables.html" title=""><img src="images/icons/mainnav/tables.png" alt="" /><span>Tables</span></a>
                <ul>
                    <li><a href="tables.html" title=""><span class="icol-frames"></span>Standard tables</a></li>
                    <li><a href="tables_dynamic.html" title=""><span class="icol-refresh"></span>Dynamic table</a></li>
                    <li><a href="tables_control.html" title=""><span class="icol-bullseye"></span>Tables with control</a></li>
                    <li><a href="tables_sortable.html" title=""><span class="icol-transfer"></span>Sortable and resizable</a></li>
                </ul>
            </li>
            <li><a href="other_calendar.html" title=""><img src="images/icons/mainnav/other.png" alt="" /><span>Other pages</span></a>
                <ul>
                    <li><a href="other_calendar.html" title=""><span class="icol-dcalendar"></span>Calendar</a></li>
                    <li><a href="other_gallery.html" title=""><span class="icol-images2"></span>Images gallery</a></li>
                    <li><a href="other_file_manager.html" title=""><span class="icol-files"></span>File manager</a></li>
                    <li><a href="#" title="" class="exp"><span class="icol-alert"></span>Error pages <span class="dataNumRed">6</span></a>
                        <ul>
                            <li><a href="other_403.html" title="">403 error</a></li>
                            <li><a href="other_404.html" title="">404 error</a></li>
                            <li><a href="other_405.html" title="">405 error</a></li>
                            <li><a href="other_500.html" title="">500 error</a></li>
                            <li><a href="other_503.html" title="">503 error</a></li>
                            <li><a href="other_offline.html" title="">Website is offline error</a></li>
                        </ul>
                    </li>
                    <li><a href="other_typography.html" title=""><span class="icol-create"></span>Typography</a></li>
                    <li><a href="other_invoice.html" title=""><span class="icol-money2"></span>Invoice template</a></li>
                </ul>
            </li>
        </ul>
    </div>

   </div>
<!-- Sidebar ends -->


<!-- Content begins -->    
<div id="container">
    <div class="contentTop">
        <span class="pageTitle"><span class="icon-user-2"></span>User interface elements</span>
        <ul class="quickStats">
            <li>
                <a href="" class="blueImg"><img src="images/icons/quickstats/plus.png" alt="" /></a>
                <div class="floatR"><strong class="blue">5489</strong><span>visits</span></div>
            </li>
            <li>
                <a href="" class="redImg"><img src="images/icons/quickstats/user.png" alt="" /></a>
                <div class="floatR"><strong class="blue">4658</strong><span>users</span></div>
            </li>
            <li>
                <a href="" class="greenImg"><img src="images/icons/quickstats/money.png" alt="" /></a>
                <div class="floatR"><strong class="blue">1289</strong><span>orders</span></div>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
    
    <!-- Breadcrumbs line -->
    <div class="breadLine">
        <div class="bc">
            <ul id="breadcrumbs" class="breadcrumbs">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#">UI elements</a>
                    <ul>
                        <li><a href="ui_icons.html" title="">Icons</a></li>
                        <li><a href="ui_buttons.html" title="">Button sets</a></li>
                        <li><a href="ui_grid.html" title="">Grid</a></li>
                        <li><a href="ui_custom.html" title="">Custom elements</a></li>
                        <li><a href="ui_experimental.html" title="">Experimental</a></li>
                    </ul>
                </li>
                <li class="current"><a href="ui.html" title="">General elements</a></li>
            </ul>
        </div>
        
        <div class="breadLinks">
            <ul>
                <li><a href="#" title=""><i class="icos-list"></i><span>Orders</span> <strong>(+58)</strong></a></li>
                <li><a href="#" title=""><i class="icos-check"></i><span>Tasks</span> <strong>(+12)</strong></a></li>
                <li class="has">
                    <a title="">
                        <i class="icos-money3"></i>
                        <span>Invoices</span>
                        <span><img src="images/elements/control/hasddArrow.png" alt="" /></span>
                    </a>
                    <ul>
                        <li><a href="#" title=""><span class="icos-add"></span>New invoice</a></li>
                        <li><a href="#" title=""><span class="icos-archive"></span>History</a></li>
                        <li><a href="#" title=""><span class="icos-printer"></span>Print invoices</a></li>
                    </ul>
                </li>
            </ul>
             <div class="clear"></div>
        </div>
    </div>
    
    <!-- Main content -->
    <div class="wrapper">
    	
        <!-- Rounded buttons -->
        <ul class="middleNavR">
            <li><a href="#" title="Add an article" class="tipN"><img src="images/icons/middlenav/create.png" alt="" /></a></li>
            <li><a href="#" title="Upload files" class="tipN"><img src="images/icons/middlenav/upload.png" alt="" /></a></li>
            <li><a href="#" title="Add something" class="tipN"><img src="images/icons/middlenav/add.png" alt="" /></a></li>
            <li><a href="#" title="Messages" class="tipN"><img src="images/icons/middlenav/dialogs.png" alt="" /></a><strong>8</strong></li>
            <li><a href="#" title="Check statistics" class="tipN"><img src="images/icons/middlenav/stats.png" alt="" /></a></li>
        </ul>
        
        <div class="divider"><span></span></div>
        
        <!-- Square buttons -->
        <ul class="middleNavS">
            <li><a href="#" title="Add an article" class="tipN"><img src="images/icons/middlenav/create.png" alt="" /></a></li>
            <li><a href="#" title="Upload files" class="tipN"><img src="images/icons/middlenav/upload.png" alt="" /></a></li>
            <li><a href="#" title="Add something" class="tipN"><img src="images/icons/middlenav/add.png" alt="" /></a></li>
            <li><a href="#" title="Messages" class="tipN"><img src="images/icons/middlenav/dialogs.png" alt="" /></a></li>
            <li><a href="#" title="Check statistics" class="tipN"><img src="images/icons/middlenav/stats.png" alt="" /></a><strong>8</strong></li>
        </ul>
        
        <div class="divider"><span></span></div>
        
        <!-- Alternative buttons -->
        <ul class="middleNavA">
            <li><a href="#" title="Add an article"><img src="images/icons/color/order-149.png" alt="" /><span>New tasks</span></a></li>
            <li><a href="#" title="Upload files"><img src="images/icons/color/issue.png" alt="" /><span>My invoices</span></a></li>
            <li><a href="#" title="Add something"><img src="images/icons/color/hire-me.png" alt="" /><span>Add users</span></a><strong>8</strong></li>
            <li><a href="#" title="Messages"><img src="images/icons/color/donate.png" alt="" /><span>Donations</span></a></li>
            <li><a href="#" title="Check statistics"><img src="images/icons/color/config.png" alt="" /><span>Parameters</span></a></li>
        </ul>
        
        <div class="divider"><span></span></div>
    	
        <!-- Buttons with font icons -->
        <ul class="middleNavA">
            <li><a href="#" title="Add an article"><span class="iconb" data-icon="&#xe078;"></span><span>New tasks</span></a></li>
            <li><a href="#" title="Upload files"><span class="iconb" data-icon="&#xe271;"></span><span>My invoices</span></a></li>
            <li><a href="#" title="Add something"><span class="iconb" data-icon="&#xe1fb;"></span><span>Add users</span></a><strong>8</strong></li>
            <li><a href="#" title="Messages"><span class="iconb" data-icon="&#xe079;"></span><span>Donations</span></a></li>
            <li><a href="#" title="Check statistics"><span class="iconb" data-icon="&#xe167;"></span><span>Parameters</span></a></li>
        </ul>
        
        <div class="divider"><span></span></div>
        
        <!-- Color buttons -->
        <ul class="middleFree">
            <li><a href="#" title="Add an article" class="bBlue"><span class="iconb" data-icon="&#xe078;"></span><span>Downloads</span></a></li>
            <li><a href="#" title="Upload files" class="bRed"><span class="iconb" data-icon="&#xe271;"></span><span>Quick search</span></a></li>
            <li><a href="#" title="Add something" class="bGreen"><span class="iconb" data-icon="&#xe1fb;"></span><span>View gallery</span></a><strong>8</strong></li>
            <li><a href="#" title="Messages" class="bLightBlue"><span class="iconb" data-icon="&#xe079;"></span><span>Upload file</span></a></li>
            <li><a href="#" title="Check statistics" class="bGold"><span class="iconb" data-icon="&#xe167;"></span><span>Reload data</span></a></li>
        </ul>
    
    
        <div class="fluid">
        	
            <!-- Sliders -->
            <div class="widget">
                <div class="whead"><h6>Sliders</h6><div class="clear"></div></div>
                <div class="formRow">
                    <div class="grid3"><label>Simple slider:</label></div>
                    <div class="grid9"><div class="uSlider"></div></div><div class="clear"></div>
                </div>
                
                <div class="formRow">
                    <div class="grid3"><label>Range slider:</label></div>
                    <div class="grid9">
                        <div class="sliderSpecs">
                            <label for="rangeAmount">Price range:</label><input type="text" id="rangeAmount" />
                            <div class="clear"></div>
                        </div>
                        <div class="uRange"></div>
                    </div>
                    <div class="clear"></div>
                </div>		
                
                <div class="formRow">
                    <div class="grid3"><label>With minimum:</label></div>
                    <div class="grid9">
                        <div class="sliderSpecs">
                            <label for="minRangeAmount">Minimum:</label><input type="text" id="minRangeAmount" />
                            <div class="clear"></div>
                        </div>
                        <div class="uMin"></div>
                    </div>
                    <div class="clear"></div>
                </div>	
                
                <div class="formRow">
                    <div class="grid3"><label>With maximum:</label></div>
                    <div class="grid9">
                        <div class="sliderSpecs">
                            <label for="maxRangeAmount">Maximum:</label><input type="text" id="maxRangeAmount" />
                            <div class="clear"></div>
                        </div>
                        <div class="uMax"></div>
                    </div>
                    <div class="clear"></div>
                </div>
                
                <div class="formRow">
                    <div class="grid3"><label>Vertical sliders:</label></div>
                    <div class="grid9">
                        <div id="eq">
                            <span>88</span>
                            <span>77</span>
                            <span>55</span>
                            <span>33</span>
                            <span>40</span>
                            <span>45</span>
                            <span>70</span>
                            <span>82</span>
                        </div>    
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        
        	<!-- Progress bars -->
            <div class="widget">
                <div class="whead"><h6>Progress bars</h6><div class="clear"></div></div>
                <div class="formRow">
                    <div class="grid3"><label>jQuery UI bar:</label></div>
                    <div class="grid9">
                        <div id="progress"></div>
                    </div>
                    <div class="clear"></div>
                </div>
        
                <div class="formRow">
                    <div class="grid3"><label>Animated bar:</label></div>
                    <div class="grid9">
                        <div id="progress1"><span class="pbar"></span><span class="percent"></span><span class="elapsed"></span></div>
                    </div>
                    <div class="clear"></div>
                </div>
                
                <div class="formRow">
                    <div class="grid3"><label>Progress with delay:</label></div>
                    <div class="grid9">
                        <div id="progress2"><span class="pbar"></span><span class="percent"></span><span class="elapsed"></span></div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        
        	<!-- Animated progress bars with tooltips -->
            <div class="widget">
                <div class="whead"><h6>Animated bars with tooltips</h6><div class="clear"></div></div>
                
                <div class="formRow">
                    <div class="grid3"><label>Grey:</label></div>
                    <div class="grid9">
                        <div class="contentProgress mt8"><div class="barGr tipS" id="bar1" title="15%"></div></div>
                    </div>
                    <div class="clear"></div>
                </div>
                
                <div class="formRow">
                    <div class="grid3"><label>Blue:</label></div>
                    <div class="grid9">
                        <div class="contentProgress mt8"><div class="barB tipS" id="bar2" title="30%"></div></div>
                    </div>
                    <div class="clear"></div>
                </div>
        
                <div class="formRow">
                    <div class="grid3"><label>Orange:</label></div>
                    <div class="grid9">
                        <div class="contentProgress mt8"><div class="barO tipS" id="bar3" title="45%"></div></div>
                    </div>
                    <div class="clear"></div>
                </div>
        
                <div class="formRow">
                    <div class="grid3"><label>Black:</label></div>
                    <div class="grid9">
                        <div class="contentProgress mt8"><div class="barBl tipS" id="bar4" title="60%"></div></div>
                    </div>
                    <div class="clear"></div>
                </div>
        
                <div class="formRow">
                    <div class="grid3"><label>Red:</label></div>
                    <div class="grid9">
                        <div class="contentProgress mt8"><div class="barR tipS" id="bar5" title="75%"></div></div>
                    </div>
                    <div class="clear"></div>
                </div>
        
                <div class="formRow">
                    <div class="grid3"><label>Green:</label></div>
                    <div class="grid9">
                        <div class="contentProgress mt8"><div class="barG tipS" id="bar6" title="90%"></div></div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        
        
            <div class="fluid">
            
            	<!-- Pickers -->
                <div class="widget grid6">
                    <div class="whead"><h6>Pickers</h6><div class="clear"></div></div>
                    <div class="formRow">
                        <div class="grid3"><label>Inline date picker:</label></div>
                        <div class="grid9"><div class="inlinedate"></div></div><div class="clear"></div>
                    </div>		
                    
                    <div class="formRow">
                        <div class="grid3"><label>Date picker:</label></div>
                        <div class="grid9"><input type="text" class="datepicker" /></div><div class="clear"></div>
                    </div>
                    
                    <div class="formRow">
                        <div class="grid3"><label>Time picker:</label></div>
                        <div class="grid9"><input type="text" class="timepicker" size="10" /><span class="ui-datepicker-append">Use mousewheel and keyboard</span></div><div class="clear"></div>
                    </div>
                    
                    <div class="formRow">
                        <div class="grid3"><label>Time range:</label></div>
                        <div class="grid9">
                            <ul class="timeRange">
                                <li><input type="text" class="timepicker" size="10" /></li>
                                <li class="sep">-</li>
                                <li><input type="text" class="timepicker" size="10" /></li>
                            </ul>
                        </div>
                        <div class="clear"></div>
                    </div>
                    
                    <div class="formRow">
                        <div class="grid3"><label>Dates range:</label></div>
                        <div class="grid9">
                            <ul class="datesRange">
                                <li><input type="text" id="fromDate" name="from" placeholder="From"/></li>
                                <li class="sep">-</li>
                                <li><input type="text" id="toDate" name="to" placeholder="To"/></li>
                            </ul>
                        </div><div class="clear"></div>
                    </div>
                    
                    <div class="formRow">
                        <div class="grid3"><label>Color picker:</label></div>
                        <div class="grid9"><div class="cPicker" id="cPicker"><div style="background-color: #e62e90"></div><span>Choose color...</span></div></div><div class="clear"></div>
                    </div>
                    
                    <div class="formRow hideTablet">
                        <div class="grid3"><label>Flat color picker:</label></div>
                        <div class="grid9"><div class="cPicker" id="flatPicker"></div></div><div class="clear"></div>
                    </div>
                </div>
                
                <!-- Other stuff -->
                <div class="grid6">
                    <div class="widget">
                        <div class="whead"><h6>Growl notifications</h6><div class="clear"></div></div>
                        <div class="body" align="center">
                            <input type="button" value="Basic notice" class="buttonM bDefault" style="margin: 5px;" onclick="$.jGrowl('Hello world!');" />
                            <input type="button" value="Sticky notice" class="buttonM bDefault" style="margin: 5px;" onclick="$.jGrowl('Stick this!', { sticky: true });"  />
                            <input type="button" value="Message with header" class="buttonM bDefault" style="margin: 5px;" onclick="$.jGrowl('A message with a header', { header: 'Important' });" />
                            <input type="button" value="Long live message" class="buttonM bDefault" style="margin: 5px;" onclick="$.jGrowl('A message that will live a little longer.', { life: 10000 });"  />
                        </div>
                    </div>		
                    
                    <!-- Ajax loaders -->
                    <div class="widget">
                        <div class="whead"><h6>Ajax loaders</h6><div class="clear"></div></div>
                        <div class="body" align="center">
                            <div class="mr20 floatL"><img src="images/elements/loaders/1.gif" style="float: left" alt="" /><img src="images/elements/loaders/1s.gif" style="float: left; margin: 7px 0 0 10px;" alt="" /><div class="clear"></div></div>
                            <div class="mr20 floatL"><img src="images/elements/loaders/2.gif" style="float: left" alt="" /><img src="images/elements/loaders/2s.gif" style="float: left; margin: 7px 0 0 10px;" alt="" /><div class="clear"></div></div>
                            <div class="mr20 floatL"><img src="images/elements/loaders/3.gif" style="float: left" alt="" /><img src="images/elements/loaders/3s.gif" style="float: left; margin: 7px 0 0 10px;" alt="" /><div class="clear"></div></div>
                            <div class="mr20 floatL"><img src="images/elements/loaders/4.gif" style="float: left" alt="" /><img src="images/elements/loaders/4s.gif" style="float: left; margin: 7px 0 0 10px;" alt="" /><div class="clear"></div></div>
                            <div class="mr20 floatL"><img src="images/elements/loaders/5.gif" style="float: left" alt="" /><img src="images/elements/loaders/5s.gif" style="float: left; margin: 7px 0 0 10px;" alt="" /><div class="clear"></div></div>
                            <div class="mr20 floatL"><img src="images/elements/loaders/6.gif" style="float: left" alt="" /><img src="images/elements/loaders/6s.gif" style="float: left; margin: 7px 0 0 10px;" alt="" /><div class="clear"></div></div>
                            <div class="mr20 floatL"><img src="images/elements/loaders/7.gif" style="float: left; margin-top: 9px;" alt="" /><img src="images/elements/loaders/7s.gif" style="float: left; margin: 12px 0 0 10px;" alt="" /><div class="clear"></div></div>
                            <div class="mr20 floatL"><img src="images/elements/loaders/8.gif" style="float: left" alt="" /><img src="images/elements/loaders/8s.gif" style="float: left; margin: 7px 0 0 10px;" alt="" /><div class="clear"></div></div>
                            <div class="mr20 floatL"><img src="images/elements/loaders/9.gif" style="float: left" alt="" /><img src="images/elements/loaders/9s.gif" style="float: left; margin: 7px 0 0 10px;" alt="" /><div class="clear"></div></div>
                            <div class="mr20 floatL"><img src="images/elements/loaders/10.gif" style="float: left" alt="" /><img src="images/elements/loaders/10s.gif" style="float: left; margin: 7px 0 0 10px;" alt="" /><div class="clear"></div></div>
                            <div class="clear"></div>
                        </div>
                    </div>	
                    
                    <!-- Collapsible. Opened by default -->
                    <div class="widget">
                        <div class="whead hand opened" id="opened"><h6>Toggle. Opened by default</h6><div class="clear"></div></div>
                        <div class="body">This one is opened by default</div>
                    </div>
                    
                    <!-- Collapsible. Closed by default -->
                    <div class="widget">
                        <div class="whead hand closed"><h6>Toggle. Closed by default</h6><div class="clear"></div></div>
                        <div class="body">This one is closed by default</div>
                    </div>
                    
                    <!-- Accordion -->
                    <div class="widget acc">      
                      <div class="whead"><h6>Accordion menu. Active</h6><div class="clear"></div></div>
                        <div class="menu_body">
                            This is an accordion. This one is collapsible and opened by default
                        </div>
                      <div class="whead"><h6>Accordion menu. Inactive</h6><div class="clear"></div></div>
                        <div class="menu_body">
                            Now this one is active
                        </div>
                      <div class="whead"><h6>Accordion menu. Inactive</h6><div class="clear"></div></div>
                        <div class="menu_body">
                            And now this one...
                       </div>
                    </div>  
                    
                    <!-- Toggles group -->
                    <div class="widget togglesGroup">
                        <div class="whead opened" id="toggleOpened"><h6>Toggles group. Active</h6><div class="clear"></div></div>
                        <div class="body">This widget is opened by default. Works in case of adding id="opened" to the widget head</div>
                        
                        <div class="whead closed"><h6>Toggles group. Inactive</h6><div class="clear"></div></div>
                        <div class="body">This widget is closed by default.</div>
                        
                        <div class="whead closed"><h6>Toggles group. Inactive</h6><div class="clear"></div></div>
                        <div class="body">This widget is closed by default.</div>
                    </div>
                </div>
            </div>
        
            <!-- Notifications -->
            <div class="nNote nWarning">
                <p>This is a warning message. You can use this to warn users on any events</p>
            </div>
            <div class="nNote nInformation">
                <p>This is a message for information, can be any general information.</p>
            </div>   
            <div class="nNote nSuccess">
                <p>Success message! hoooraaay!!!!</p>
            </div>  
            <div class="nNote nFailure">
                <p>Oops sorry. That action is not valid, or our servers have gone bonkers</p>
            </div>
        
            <!-- Pagination -->
            <div class="pagination">
                <ul class="pages">
                    <li class="prev"><a href="#">&lt;</a></li>
                    <li><a href="#" class="active">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>...</li>
                    <li><a href="#">30</a></li>
                    <li class="next"><a href="#">&gt;</a></li>
                </ul>
            </div>

        	<!-- Dialogs and stuff -->
            <div class="fluid">
                <div class="widget grid6">
                    <div class="whead"><h6>Dialogs</h6><div class="clear"></div></div>
                    <div class="body" align="center">
                        <a href="#" class="buttonM bDefault" id="dialog_open">jQuery UI dialog</a>
                        <!-- ui-dialog -->
                        <div id="dialog" title="Dialog Title">
                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>
                        <a href="#" class="buttonM bDefault ml10" id="modal_open">Open modal</a>
                        <div id="dialog-modal" title="Basic modal dialog">
                            <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
                        </div>
                        <a href="#" class="buttonM bDefault ml10" id="formDialog_open">Dialog with form elements</a>
                        
                        <!-- Dialog content -->
                        <div id="formDialog" class="dialog" title="Dialog with form elements">
                            <form action="">
                            <label>Text field:</label>
                                <input type="text" name="sampleInput" class="clear" placeholder="Enter something" />
                                <div class="divider"><span></span></div>
                                <div class="dialogSelect m10">
                                    <label>Select:</label>
                                    <select name="select2" >
                                        <option value="opt1">Usual select box</option>
                                        <option value="opt2">Option 2</option>
                                        <option value="opt3">Option 3</option>
                                        <option value="opt4">Option 4</option>
                                        <option value="opt5">Option 5</option>
                                        <option value="opt6">Option 6</option>
                                        <option value="opt7">Option 7</option>
                                        <option value="opt8">Option 8</option>
                                    </select>
                                </div>
                                <div class="divider"><span></span></div>
                                <label>Textarea:</label>
                                <textarea rows="8" cols="" name="textarea" class="auto" placeholder="This textarea is elastic"></textarea>
                                <div>
                                    <span class="floatL"><input type="radio" name="dialogRadio" /><label>Radio</label></span>
                                    <span class="floatR"><input type="checkbox" class="check" name="dialogCheck" checked="checked" /><label>Checkbox</label></span>
                                    <span class="clear"></span>
                                </div>
                            </form>
                        </div>
                        
                        <!-- Dialog content -->
                        <a href="#" class="buttonM bDefault ml10" id="customDialog_open">Dialog with custom elements</a>
                        <div id="customDialog" class="customDialog" title="Dialog with other custom elements">
                            <table cellpadding="0" cellspacing="0" width="100%" class="tDefault checkAll tMedia" id="checkAll">
                                <thead>
                                    <tr>
                                        <td width="50">Image</td>
                                        <td class="sortCol"><div>Description<span></span></div></td>
                                        <td width="130" class="sortCol"><div>Date<span></span></div></td>
                                        <td width="120">File info</td>
                                        <td width="100">Actions</td>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <td colspan="5">
                                            <div class="itemActions">
                                                <label>Apply action:</label>
                                                <select>
                                                    <option value="">Select action...</option>
                                                    <option value="Edit">Edit</option>
                                                    <option value="Delete">Delete</option>
                                                    <option value="Move">Move somewhere</option>
                                                </select>
                                            </div>
                                            <div class="tPages">
                                                <ul class="pages">
                                                    <li class="prev"><a href="#" title=""><span class="icon-arrow-14"></span></a></li>
                                                    <li><a href="#" title="" class="active">1</a></li>
                                                    <li><a href="#" title="">2</a></li>
                                                    <li><a href="#" title="">3</a></li>
                                                    <li><a href="#" title="">4</a></li>
                                                    <li><a href="#" title="">5</a></li>
                                                    <li><a href="#" title="">6</a></li>
                                                    <li>...</li>
                                                    <li><a href="#" title="">20</a></li>
                                                    <li class="next"><a href="#" title=""><span class="icon-arrow-17"></span></a></li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face1.png" alt="" /></a></td>
                                        <td class="textL"><a href="#" title="">Image1 description</a></td>
                                        <td>Feb 12, 2012. 12:28</td>
                                        <td class="fileInfo"><span><strong>Size:</strong> 215 Kb</span><span><strong>Format:</strong> .jpg</span></td>
                                        <td>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Edit"><span class="iconb" data-icon="&#xe1db;"></span></a>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Remove"><span class="iconb" data-icon="&#xe136;"></span></a>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Options"><span class="iconb" data-icon="&#xe1f7;"></span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face1.png" alt="" /></a></td>
                                        <td class="textL"><a href="#" title="">Image1 description</a></td>
                                        <td>Feb 12, 2012. 12:28</td>
                                        <td class="fileInfo"><span><strong>Size:</strong> 215 Kb</span><span><strong>Format:</strong> .jpg</span></td>
                                        <td>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Edit"><span class="iconb" data-icon="&#xe1db;"></span></a>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Remove"><span class="iconb" data-icon="&#xe136;"></span></a>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Options"><span class="iconb" data-icon="&#xe1f7;"></span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face1.png" alt="" /></a></td>
                                        <td class="textL"><a href="#" title="">Image1 description</a></td>
                                        <td>Feb 12, 2012. 12:28</td>
                                        <td class="fileInfo"><span><strong>Size:</strong> 215 Kb</span><span><strong>Format:</strong> .jpg</span></td>
                                        <td>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Edit"><span class="iconb" data-icon="&#xe1db;"></span></a>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Remove"><span class="iconb" data-icon="&#xe136;"></span></a>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Options"><span class="iconb" data-icon="&#xe1f7;"></span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face1.png" alt="" /></a></td>
                                        <td class="textL"><a href="#" title="">Image1 description</a></td>
                                        <td>Feb 12, 2012. 12:28</td>
                                        <td class="fileInfo"><span><strong>Size:</strong> 215 Kb</span><span><strong>Format:</strong> .jpg</span></td>
                                        <td>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Edit"><span class="iconb" data-icon="&#xe1db;"></span></a>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Remove"><span class="iconb" data-icon="&#xe136;"></span></a>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Options"><span class="iconb" data-icon="&#xe1f7;"></span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a href="images/big.png" title="" class="lightbox"><img src="images/live/face1.png" alt="" /></a></td>
                                        <td class="textL"><a href="#" title="">Image1 description</a></td>
                                        <td>Feb 12, 2012. 12:28</td>
                                        <td class="fileInfo"><span><strong>Size:</strong> 215 Kb</span><span><strong>Format:</strong> .jpg</span></td>
                                        <td>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Edit"><span class="iconb" data-icon="&#xe1db;"></span></a>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Remove"><span class="iconb" data-icon="&#xe136;"></span></a>
                                            <a href="#" class="tablectrl_small bDefault tipS" title="Options"><span class="iconb" data-icon="&#xe1f7;"></span></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- Tooltips -->
                <div class="widget grid6">
                    <div class="whead"><h6>Tooltips</h6><div class="clear"></div></div>
                    <div class="body" align="center">
                        <a href="#" class="buttonM bDefault tipN" title="Bottom position">Bottom position</a>
                        <a href="#" class="buttonM bDefault ml10 tipS" title="Top position">Top position</a>
                        <a href="#" class="buttonM bDefault ml10 tipE" title="Left position">Left position</a>
                        <a href="#" class="buttonM bDefault ml10 tipW" title="Right position">Right position</a>
                        <a href="#" class="buttonM bDefault ml10 tipS wHtml" title="this <i>contains</i> <b>formatted</b> <u>text</u>">With HTML inside</a>
                    </div>
                </div>
            </div>
        	
            <!-- Lightboxes -->
            <div class="fluid">
                <div class="widget grid6">
                    <div class="whead"><h6>Lightbox</h6><div class="clear"></div></div>
                    <div class="body" align="center">
                    <a href="images/big.png" class="lightbox"><img src="images/demo.png" alt="" /></a>
                    <a href="images/big.png" class="lightbox" style="margin: 0 10px;"><img src="images/demo.png" alt="" /></a>
                    <a href="images/big.png" class="lightbox" style="margin-right: 10px;"><img src="images/demo.png" alt="" /></a>
                    <a href="images/big.png" class="lightbox"><img src="images/demo.png" alt="" /></a>
                    </div>
                </div>
                
                <div class="widget grid6">
                    <div class="whead"><h6>Lightbox gallery (mousewheel support)</h6><div class="clear"></div></div>
                    <div class="body" align="center">
                    <a href="images/big.png" class="lightbox" rel="group"><img src="images/demo.png" alt="" /></a>
                    <a href="images/big.png" class="lightbox" rel="group" style="margin: 0 10px;"><img src="images/demo.png" alt="" /></a>
                    <a href="images/big.png" class="lightbox" rel="group" style="margin-right: 10px;"><img src="images/demo.png" alt="" /></a>
                    <a href="images/big.png" class="lightbox" rel="group"><img src="images/demo.png" alt="" /></a>
                    </div>
                </div>
            </div>
        
    		<!-- Tabs -->
            <div class="fluid">
                <div class="widget grid6">       
                    <ul class="tabs">
                        <li><a href="#tabb1">Tab active</a></li>
                        <li><a href="#tabb2">Tab inactive</a></li>
                    </ul>
                    
                    <div class="tab_container">
                        <div id="tabb1" class="tab_content">
                            Tab is active and has left tabs             
                        </div>
                        <div id="tabb2" class="tab_content"> This tab is active now</div>
                    </div>	
                    <div class="clear"></div>		 
                </div>
                    
                <div class="widget grid6 rightTabs">       
                    <ul class="tabs">
                        <li><a href="#tabb3">Tab active</a></li>
                        <li><a href="#tabb4">Tab inactive</a></li>
                    </ul>
                    <div class="tab_container">
                        <div id="tabb3" class="tab_content">
                            Tab is active and has right tabs               
                        </div>
                        <div id="tabb4" class="tab_content"> This tab is active now</div>
                    </div>	
                    <div class="clear"></div>		 
                </div>
            </div>
        </div>
    </div>
    <!-- Main content ends -->
    
    </div>
<!-- Content ends -->
    </div> </div>
</body>
</html>
